<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<!--
/**
 * @module Polymer UI Elements
 */
/**
 * @class polymer-ui-nav-arrow
 */
-->
<polymer-element name="polymer-ui-nav-arrow" attributes="target top">
  <template>
    <link rel="stylesheet" href="polymer-ui-nav-arrow.css">
  </template>
  <script>
    Polymer('polymer-ui-nav-arrow', {
      targetChanged: function() {
        this.classList.toggle('show', this.target);
        if (this.target) {
          this.asyncMethod('move');
        }
      },
      topChanged: function() {
        this.classList.add('show');
        this.translateY(this.top);
      },
      translateY: function(y) {
        var s = this.style;
        s.webkitTransform = s.mozTransform = s.msTransform = s.transform = 
          'translate3d(0,' + y + 'px,0)';
      },
      move: function() {
        var t = this.target;
        var y = t.offsetTop + t.offsetHeight/2;
        this.translateY(y);
      }
    });
  </script>
</polymer-element>
